<template>
    <div class="user">
        <div class="user-header">
            <div class="header-set">
                <!-- <el-icon>
                    <Setting />
                </el-icon> -->
            </div>
            <div class="header-content" @click.stop="toUserDetail(tabItem.id)">
                <div class="header-up">
                    <img :src="tabItem.headImag" alt="">
                </div>
                <div class="header-middle">{{ tabItem.userName }}</div>
                <div class="header-down">电话:{{ tabItem.phone }}</div>
            </div>
        </div>
        <div class="user-content">
            <div class="content-up">
                <div>
                    <div class="content-up-title">资源管理</div>
                    <div class="content-up-content">
                        <div class="content-up-content-item" v-for="item in upContentItem" :key="item.name">
                            <div class="up-item-icon" :style="{ 'background': item.color }">
                                <component :is="item.icon"></component>
                            </div>
                            <div class="item-name">{{ item.name }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-down">
                <div class="content-down-item" v-for="(item, index) in downContentItem" :key="item.name"
                    @click.stop="manageInfo($event)" :id=index>
                    <div class="down-item-content">{{ item.name }}</div>
                    <div class="down-item-icon">
                        <el-icon>
                            <ArrowRight />
                        </el-icon>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup name="User">
import { ref, onMounted } from 'vue'
import service from '@/utils/request';
import { useRouter } from 'vue-router';
const router = useRouter();
const tabItem = ref([{ id: '', userName: '', phone: '', headImag: '' }]);
const upContentItem = ref([
    { name: '视频', icon: 'VideoPlay', color: 'rgb(1 209 217)' },
    { name: '音频', icon: 'VideoPause', color: 'rgb(2 200 113)' },
    { name: '图片', icon: 'PictureRounded', color: 'rgb(255 160 1)' },
    { name: '文档', icon: 'DocumentRemove', color: 'rgb(255 102 102)' },
]);
const downContentItem = ref([
    { name: '家庭成员' },
    { name: '账号设置' },
    { name: '退出登录' },
]);
const manageInfo = (event) => {
    var element = event.currentTarget;
    if (element.id == 0) {
        router.push('/User/FamilyMember');
    } else if (element.id == 1) {
        router.push({ name: 'AlterUser', params: { id: tabItem.value.id??0 } });
    } else if (element.id == 2) {
        ElMessageBox.confirm('是否退出登录', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            showClose: false,
            closeOnClickModal: false,
        }).then(() => {
            window.localStorage.removeItem('token');
            router.push('/Login');
        }).catch(() => { })
    }
};
const inteTable = () => {
    service({
        url: 'api/Users/user',
        method: 'get',
    }).then((res) => {
        if (res != undefined) {
            tabItem.value.id = res.data.id;
            tabItem.value.userName = res.data.userName;
            tabItem.value.phone = res.data.phone;
            tabItem.value.headImag = res.data.headImag;
        }
    });
};

const toUserDetail = (id) => {
    router.push({
        name: 'UserDetail',
        params: { id: id??0 },
    });
};
onMounted(() => {
    inteTable();
});
</script>

<style scoped>
.user {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: rgb(217 235 236);
}

.user-header {
    width: 100%;
    height: 43%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.header-set {
    width: 80%;
    height: 60px;
    text-align: right;
    line-height: 60px;
}

.header-set>.el-icon {
    font-size: 20px;
    color: black;
}

.header-content {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.header-up {
    aspect-ratio: 1/1;
    height: 100px;
    border-radius: 50%;
    background-size: cover;
}

.header-up>img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.header-middle {
    width: 50%;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    font-weight: 600;
    margin-top: 10px;
}

.header-down {
    width: 50%;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    color: #999999;
}

.user-content {
    width: 100%;
    height: 55%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.content-up {
    margin: 0 auto;
    width: 90%;
    height: 30%;
    border-radius: 10px;
    background-color: white;
}

.content-up>div {
    margin: 0 20px;
}

.content-down {
    margin: 0 auto;
    width: 90%;
    height: 50%;
    border-radius: 10px;
    background-color: white;
}

.content-up-title {
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 17px;
    font-weight: 400;
}

.content-up-content {
    width: 100%;
    height: 70px;
    line-height: 70%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content-up-content-item {
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.up-item-icon {
    width: 40px;
    height: 40px;
    text-align: center;
    color: white;
    border-radius: 5px;
}

.up-item-icon>svg {
    width: 33px;
    height: 40px;
}

.item-name {
    width: 100%;
    height: 30px;
    font-size: 14px;
    line-height: 30px;
}

.content-down-item {
    margin: 5px 20px;
    width: 88%;
    height: 30px;
    line-height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: #f0eded 1px solid;
}
</style>